<!-- backend/templates/login.html -->
{% extends "base.html" %} <!-- 继承基模板 -->

{% block content %}
    <div class="row justify-content-center"> <!-- 创建一个居中对齐的行 -->
        <div class="col-md-6"> <!-- 定义一个中等宽度的列 -->
            <h2 class="mb-4">登录</h2> <!-- 登录标题 -->
            <form id="loginForm"> <!-- 登录表单 -->
                <div class="mb-3"> <!-- 表单元素间距 -->
                    <label for="username" class="form-label">用户名</label> <!-- 用户名标签 -->
                    <input type="text" class="form-control" id="username" placeholder="请输入用户名" required>
                    <!-- 用户名输入框，必填项 -->
                </div>
                <div class="mb-3"> <!-- 表单元素间距 -->
                    <label for="password" class="form-label">密码</label> <!-- 密码标签 -->
                    <input type="password" class="form-control" id="password" placeholder="请输入密码" required>
                    <!-- 密码输入框，必填项 -->
                </div>
                <button type="submit" class="btn btn-primary w-100">登录</button> <!-- 登录按钮 -->
            </form>
            <div id="message" class="mt-3"></div> <!-- 用于显示消息的 div -->
        </div>
    </div>

    <!-- 登录相关的 JavaScript 代码 -->
    <script>
    document.addEventListener('DOMContentLoaded', () => { // 等待 DOM 完全加载后执行
        const loginForm = document.getElementById('loginForm'); // 获取登录表单
        const messageDiv = document.getElementById('message'); // 获取消息显示区域

        // 监听表单提交事件
        loginForm.addEventListener('submit', async (e) => {
            e.preventDefault(); // 阻止默认提交行为

            // 获取用户名和密码的值并去除前后空格
            const username = document.getElementById('username').value.trim();
            const password = document.getElementById('password').value.trim();

            // 验证用户名和密码是否为空
            if (!username || !password) {
                messageDiv.innerHTML = `<div class="alert alert-warning">请输入用户名和密码。</div>`; // 提示用户输入信息
                return; // 结束函数执行
            }

            try {
                // 发送 POST 请求进行登录验证
                const response = await fetch('/api/auth/login', {
                    method: 'POST', // 请求方法
                    headers: {
                        'Content-Type': 'application/json' // 请求内容类型为 JSON
                    },
                    body: JSON.stringify({ username, password }), // 请求体，包含用户名和密码
                    credentials: 'include' // 确保包含凭证（Cookies）
                });

                const data = await response.json(); // 解析响应的 JSON 数据
                if (response.ok) { // 判断响应是否成功
                    messageDiv.innerHTML = `<div class="alert alert-success">登录成功，正在跳转...</div>`; // 显示成功消息
                    sessionStorage.setItem('userRole', data.role); // 存储用户角色到 sessionStorage
                    setTimeout(() => {
                        window.location.href = '/data_upload'; // 登录成功后重定向到数据上传界面
                    }, 500); // 延迟 500 毫秒后执行重定向
                } else {
                    messageDiv.innerHTML = `<div class="alert alert-danger">${data.message}</div>`; // 显示错误消息
                }
            } catch (error) {
                messageDiv.innerHTML = `<div class="alert alert-danger">登录失败，请重试。</div>`; // 显示异常错误消息
            }
        });
    });
    </script>
{% endblock %}
